Skip to content
On this page

打包桌面MxCAD APP

我们提供了electron版本来实现桌面应用。对于electron版本,前端二次开发的插件(就是上述MxCAD目录生成的js文件)没有任何变动,我们只需要将dist/plugins下对应的js脚本复制到现在下载解压的electron项目的dist/2d/dist/plugins目录下将其覆盖。

此外,electron版本在window上新增了MxElectronAPI对象, 提供了和主线程通信的能力,我们可以在写前端二次开发的插件时通过MxElectronAPI来判断是否是electron环境。我们还可以基于vite 打包,用ts文件编写electron项目自己的插件,用于electron主线程的一些二次开发需求。

  1. 点击下载electron项目

  2. 解压后,安装依赖npm install然后运行npm run dev启动electron项目

  3. 创建src/plugins 目录, 如果存在则无需创建

  4. 创建一个插件目录 如testPlugin目录, 然后在该目录下创建一个index.ts作为该插件入口文件

  5. vite.plugins.config.ts 新增插件入口配置pluginEntryFileName: ["plugins/testPlugin/index.ts"]

  6. 运行命令调试: dev:plugins

  7. 运行命令打包: build:plugins

如果在 testPlugin 创建 preload.ts 并默认导出一个对象,这个对象存放是用来与页面通信的API。这里的preload.ts是预加载脚本,如果比较难理解可以参考预加载脚本:https://www.electronjs.org/zh/docs/latest/tutorial/tutorial-preload,其默认导出的对象就是在通过contextBridge.exposeInMainWorld定义的前端 window.MxElectronAPi.插件目录名称(命名空间)对象, 如现在创建的testPlugin目录,那么前端访问就是window.MxElectronAPi.testPlugin 就是这个默认导出的对象。

同理preload2d.ts导出的对象会覆盖preload.ts导出对象中属性相同的值,但是preload2d.ts只在显示2d图纸的页面中有效。preload3d.ts与preload2d.ts不同的是它只作用于3d显示的页面。

其中,plugins可以存在很多插件, 它下面的每一个目录都是一个插件,这个插件的目录名就是命名空间名称。 前端页面访问的对象也是退window.MxElectronAPI. 命名空间名称。

在electron项目插件的ts文件中,我们保留了mxAppContext上下文,你可以通过 global.mxAppContext访问,目前挂载了几个属性和方法: getMainWindow,showMessage,showMessageBoxSync,MainTabs。它们在ts中有对应的类型提示和说明。

以下electron项目中对应目录的描述:

路径描述提醒
dist前端打包的项目资源目录下有2d、3d等目录,其中2d和3d内还存在一个dist目录, 这个dist目录就是上文中提到的打包后前端资源,不过它是electron版本,但是目录结构是一模一样的, 我们只需要把上文中的生成的dist/plugins/test.js覆盖掉electron版本中对应dist/plugins/test.js, 然后查看config.json中是否存在对应的配置
dist-electron主线程打包的代码不建议直接修改这里的代码,因为随时都可能更新替换
rendererTypeswindow.MxElectronAPI的ts类型定义可以在前端使用,提供类型定义和说明描述
src/plugins插件目录每一个目录下的index.ts都是入口
vite.plugins.config.tsvite的打包配置每一个新的创建目录都要在这里记录,如果你稍微了解vite打包那么可以根据自己的需求作出调整, 但是最终输出文件的结构位置一定不可以变,不然无法加载插件

对于有二次开发需求现有配置或者插件无法满足时,可以给我们反馈,后续会逐步完善。

electron 桌面应用截图:

Alt text